How to Create Share Buttons for Your Site Step-by-Step

Social share buttons are an indispensable element of every website. Whether it’s a personal or a business blog, an online portfolio, or an eCommerce project, social buttons enable customers to easily spread the word about your content on Facebook, Twitter, Instagram, or Pinterest. While implementing easy social share buttons into your web resource, you can significantly expand your reach and welcome new clients to come to your site in search of valuable content or goods. The power of social media networks shouldn’t be underestimated these days. If a business cannot be found on Facebook or Instagram, it misses an opportunity to reach out to its target audience and market its goods and services to more people. As the name suggests, social share buttons make your content more shareable on the web. It’s a common practice for modern users to share links to their preferred products on their Facebook pages. Every social post can be reached by followers with the same interests and preferences as your client has.

Furthermore, with social media buttons, you can easily broadcast your content in social media groups or to the chosen individuals. The number of social media shares points out the content that people find more valuable and engaging. So, many brands are working hard to multiply social media shares and increase their brand awareness.

Spreading the word about the preferred pieces of content can be easy while simply making a few clicks. Social buttons let your customers broadcast links as they stay on your website. In most cases, it involves simply tapping the share button and selecting the social media platform where they’d like your link to appear.

How to Create a Share Button Step-by-Step

The internet is full of different share buttons, the main task is to choose the right ones. Sometimes you don't even understand what social buttons you need on your own blog. Sometimes you can't find buttons with a design that fits your needs. Sometimes you can't find any simple and cool way to implement share buttons on your blog. Don't panic! In this article, we’ll show you how to create some basic and social share buttons.

Web Design Courses

• Online coding classes for at-home learning
• Complete Photoshop Mastery Bundle

In case you don't want to deal with huge, crowded code and complex detail customization, this tutorial is exactly for you. Even HTML newbies will find it easy to follow. So, fasten your seatbelts and let's start!

Step 1

The first thing you should do is open your HTML file and paste the code below

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
or
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Step 2

Now create a js file that contains such information:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};


That's it :) A very simple method to track the statistics of clicking on the share button that is placed directly on the sharing page. This problem was solved with the help of a table in the database and simple ajax:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

This script gets an id from the URL, adds the label to the table and/or increases the counter by one for a specific social network. It is a simple solution for share buttons. You can easily change the appearance of your buttons via CSS, you can design your own buttons in Photoshop and use them here. You can do almost everything!

Of course, this example is a little bit primitive, but it is a cool point to start creating your own cool share buttons. Give it a go!

Popular social media networks let you generate custom pieces of code that we can embed into posts or pages of websites to let people broadcast their preferred content. Facebook and Twitter are two of the most popular social networks that support the respective functionality. Let’s see how to integrate such social buttons to your site.

How to Add Facebook Share Button

Facebook share buttons let your customers share links directing to posts or deals on your website with a piece of custom-written text.

To add this button to your website, you first need to go to this page.

Now let's look at what some of the fields on the setup page mean.

• URL to Like - this field adds the page of the site that we want to share on Facebook.
• Width - the width of the button is set here.
• Verb to display - here we can select the text in the "Like" or "I recommend" button.
• Color Scheme - Here you can choose the button design for light or dark sites.
• Font - select the font for the button labels.

After we have selected the settings, find the "Get Code" button and click on it. Next, a window with the code will be displayed, it also needs to be inserted in two stages:

Insert the code right after the < body > tag.

Code for displaying the button:

Paste this code where the button from facebook should be displayed:

How to Add Twitter Share Button

While adding Twitter share buttons to your website, there are several things that Twitter developers recommend you to keep in mind:

• If a user is not logged in to his or her Twitter account, they will be asked to log in to tweel your message.
• The tweet will be linking to the webpage that a person has visited. A user may feel free to adjust the message of the tweet the way he/she wants.
• After clicking “Tweet,” the popup box will reveal a list of related accounts on Twitter. A user may decide where to follow them or ignore them.
• There is no limit in the number of times per day one and the same user can tweet something to the timeline.

To add Twitter share button, do the following:

• Go to publish.twitter.com and tap on Twitter Buttons.
• Choose what type of Twitter share button you’d like to add to your site.
• Adjust the Tweet and the message it will contain while mentioning what @account you’d like it to mention.
• Once done, copy and paste the code into your site.

That’s pretty much it. We hope you will find this guide helpful. The best thing about it is that you shouldn’t have any deep coding skills to add social share buttons to your website. The automated code generators provide you with ready-to-go solutions that you can intuitively adjust, copy and paste to your website’s HTML.